<script setup>
    import {get, getImage} from '../api/http';
    import { useRouter } from 'vue-router';
    import { onMounted, ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import { menuStore, loginStatus, userInfoCache } from '../utils/store';
    import { BellFilled } from '@element-plus/icons-vue';
    // import '../utils/sse'


    const router = useRouter()

    const username = ref('')

    const avatarData = ref(null)

    const getUserInfo = () => {
        get('user/getUserVO').then(res=>{
            userInfoCache.username = res.data.username
            userInfoCache.id = res.data.id
            username.value = res.data.username
        })
    }

    const goToUserCenter = () => {
        router.push('/userCenter')
    }

    const getMenuList = () => {
        get('menu').then(res=>{
            if(res.status){
                menuStore.menuList = res.data
            }else{
                ElMessage({type: 'error', message: res.msg})
            }
        })
    }

    const goToLogin = () => {
        router.push('/login')
    }

    const goToMessage = () => {
        router.push('/message')
    }

    const getUserAvatar = () => {
        getImage('user/avatar').then(res=>{
            avatarData.value = window.URL.createObjectURL(res);
        })
    }

    onMounted(()=>{
        if(localStorage.getItem('loginStatus')==null || localStorage.getItem('loginStatus') === 'no'){
            loginStatus.value = false
        }else{
            loginStatus.value = true
        }
        getMenuList()
        getUserInfo()
        getUserAvatar()
    })
</script>
<template>
    <el-affix>
    <header v-if="menuStore.show">
        <div class="header-left">
            <div class="logo"><a href="https://www.huhailong.vip/res/html/home.html" target="_blank">Huhailong</a></div>
            <el-menu class="topmenu" router mode="horizontal" default-active="/" active-text-color="#272B4E">
                <el-menu-item><el-link href="https://www.huhailong.vip/res/html/home.html">个人简介</el-link></el-menu-item>
                <template v-for="item in menuStore.menuList" :key="item.id">
                    <el-menu-item v-if="item.subMenuList.length==0" :index="item.menuRoute">
                        <template #title>
                            {{ item.menuName }}
                        </template>
                    </el-menu-item>
                    <el-sub-menu v-if="item.subMenuList.length>0" :index="item.menuRoute">
                        <template #title>
                            {{ item.menuName }}
                        </template>
                        <el-menu-item v-for="sub in item.subMenuList" :key="sub.id" :index="sub.menuRoute">
                            <template #title>
                                {{ sub.menuName }}
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>
        <div class="header-right">
            <!-- <div v-if="loginStatus" class="message" @click="goToMessage">
                <el-badge value="1">
                    消息
                </el-badge>
            </div> -->
            <div v-if="loginStatus" class="dropdownTitle">
                <el-avatar @click="goToUserCenter" style="background-color:#eee;" shape="square" :size="30" :src="avatarData"></el-avatar>
                <div @click="goToUserCenter" class="dropdownTitle">{{ username }}</div>
            </div>
            <div v-if="!loginStatus" @click="goToLogin">登录</div>
        </div>
    </header>
    </el-affix>
    <main>
        <router-view/>
    </main>
</template>
<style scoped lang="scss">
header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: var(--el-color-white);
    align-items: center;
    font-weight: bold;
}
.header-left{
    width: 100%;
    display: flex;
    align-items: center;
}
.logo{
    width: 120px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.topmenu{
    width: 100%;
    font-weight: bold;
}
.header-right{
    margin-right: 10px;
    color: var(--el-color-black);
    cursor: pointer;
    width: 200px;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}
.message{
    margin-right: 10px;
}
header:deep(.el-menu--horizontal){
    border-bottom: none;
}
.dropdownTitle{
    color: var(--el-color-black);
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-left: 10px;
}
a{
    color: var(--el-color-black);
}
a:visited{
    color: var(--el-color-black);
}
</style>